<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font/font-awesome.min.css">
    <link rel="stylesheet" href="./foot.css">
    <style>
        body {
            background-color: rgb(244, 245, 247);
        }

        header {
            height: 200px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        header div {
            width: 100px;
            height: 100px;
            background-color: #fff;
            border-radius: 50%;
            margin: 50px auto 10px;
            background-image: url('../移动书城页面/img/icon_mine_noselected.png');
            background-repeat: no-repeat;
            background-position: center;
        }

        .order,
        .send,
        .take,
        .address,
        .phone {
            background-color: #fff;
            height: 40px;
            width: 100%;
        }

        .fa-navicon,
        .fa-file-o,
        .fa-tag,
        .fa-volume-control-phone {
            color: blue;
            font-size: 18px;
            line-height: 40px;
            margin: 0 5px 0 10px;
        }

        .fa-angle-right {
            margin-left: 230px;
            color: blue;
            font-size: 22px;
        }

        .send .fa-angle-right {
            margin-left: 246px;
        }

        .take .fa-angle-right {
            margin-left: 246px;
        }

        a {
            text-decoration: none;
            color: #000;
        }
    </style>
</head>

<body>
    <header>
        <div></div>HJ
    </header>
    <div class="order">
        <i class="fa fa-navicon"></i>
        我的订单
        <i class="fa fa-angle-right"></i>
    </div>
    <div class="send">
        <i class="fa fa-file-o"></i>
        待发货
        <i class="fa fa-angle-right"></i>
    </div>
    <div class="take">
        <i class="fa fa-file-o"></i>
        待收货
        <i class="fa fa-angle-right"></i>
    </div>
    <div class="address">
        <i class="fa fa-tag"></i>
        地址管理
        <i class="fa fa-angle-right"></i>
    </div>
    <div class="phone">
        <i class="fa fa-volume-control-phone"></i>
        联系客服
        <i class="fa fa-angle-right"></i>
    </div>
    <footer>
        <div class="foot_box1">
            <img src="./img/icon_book_noselected.png" alt=""><a href="./HomePage.html">首页</a>
        </div>
        <div class="foot_box4">
            <img src="./img/icon_sort_noselected.png" alt=""><a href="./classification.html">分类</a>
        </div>
        <div class="foot_box2">
            <img src="./img/icon_car_noselected.png" alt=""><a href="./Shopping.html">购物车</a>
        </div>
        <div class="foot_box3">
            <img src="./img/icon_mine_selected.png" alt=""><a>我的</a>
        </div>
    </footer>
</body>

</html>